<template>
  <div>
    <div class="top-box">
      <div class="top">
          <div class="sma">
              <span @click="back()"><img src="/image/Mine/zjt.png" alt=""></span>
              <p class="p1">我的收藏</p>
              <p class="p2"><img src="/image/Mine/gwc.png" alt=""></p> 
          </div>
          <div class="kuang">
            <input type="checkbox" name="" id=""><span class="jin">仅看可售</span>  
          </div>
          
      </div>
    </div>
    <div class="main">
        <div class="main-box">
            <img src="image/Mine/04.jpg" alt="" class="datu">
            <div>
                <h4>西风</h4>
                <p>￥<b>188</b><i>/瓶</i><span> <img src="image/Mine/bgw.png" alt=""> </span></p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    methods:{
        back(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
.top-box{
    width: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    background-color: #f2f2f2;
}
.top{
    width: 93%;
}
.top .sma{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.08rem;
}
.top .kuang{
    margin-top: 0.2rem;
    margin-bottom: 0.1rem;
}
.top .jin{
    font-size: 0.18rem;
}
.top input{
    width: 0.18rem;
    height: 0.18rem;
}
.top .sma span,.top .sma span img{
    width: 0.2rem;
    height: 0.2rem;
}
.top .sma .p1{
    font-size: 0.16rem;
}
.top .sma .p2{
    font-size: 0.14rem;
    color: #4abcfb;
}
.top .sma .p2 img{
    width: 0.25rem;
    height: .25rem;
}
.main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.8rem;
}
.main .main-box{
    width: 93%;
    display: flex;
}
.main .main-box .datu{
    width: 1rem;
    height: 1rem;
}
.main .main-box div h4{
    font-size: 0.18rem;
    font-weight: normal;
    margin-top: 0.1rem;
    margin-bottom: 0.4rem;
}
.main .main-box div{
    width: 3rem;
    border-bottom: 0.01rem solid #f7f7f7;
}
.main .main-box div p{
    font-size: 0.14rem;
    color: red;
    display: flex;
    align-items: flex-end;
    position: relative;
    margin-bottom: 0.1rem;
}
.main .main-box div p b{
    font-size: 0.18rem;
    font-weight: normal;
}
.main .main-box div p i{
    font-style: normal;
    color: #c7c7c7;
}
.main .main-box div p span{
    background-color: #0caff4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.25rem;
    height: 0.25rem;
     position: absolute;
     right: 0.2rem;
}
.main .main-box div p span img{
    width: 0.2rem;
    height: 0.2rem;
}
</style>